<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <div style="margin: 0 auto">
      <el-button type="primary" round @click="query">query</el-button>
      <el-button type="warning" round @click="post">post</el-button>
      <el-button type="success" round @click="formPost">formPost</el-button>
    </div>
    <div>
      <el-button type="primary" round @click="login">微信登录</el-button>
      <el-button type="success" round @click="getInfo">获取信息</el-button>
      <el-button type="success" round @click="getJssdk">获取jssdk</el-button>
    </div>
    <div>
      <el-button type="primary" round @click="brushStep">一键刷步</el-button>
    </div>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import { query, post, postForm } from './util/request';
import { getUrlParams, configJsSDK } from './util';
export default {
  name: 'app',
  components: {
    HelloWorld,
  },
  data() {
    return {
      openid: '',
    };
  },
  created() {
    const code = getUrlParams('code');
    console.log('测试123456:', code);
    if (code) this.getOpenId(code);
  },
  methods: {
    async brushStep() {
      try {
        // for (const key in data) {
        //   console.log('测试:', key);
        // }
        const params = {
          phone: 17027153739,
          pwd: 'aa615616',
          num: 18260,
          timestamp: '',
          mKey: 'faithxy',
        };
        console.log('测试:', params);
        const res = await postForm('/brushStep', params);
        console.log('测试666:', res);
      } catch (error) {
        console.log('异常响应:', error);
      }
    },
    login() {
      location.href = '/api/wechat/wxAuthorize/';
    },
    async getOpenId(code) {
      const res = await query('/api/wechat/getOpenId', { code });
      if (res.status === 500) {
        // this.login();
        return this.$message.error(res.message);
      }
      this.openid = res.data;
    },
    async getInfo(code) {
      if (!this.openid) return this.$message.error('openid参数异常!');
      const res = await query('/api/wechat/getInfo', { openid: this.openid });
      if (res.status === 500) return this.$message.error(res.message);
    },
    async getJssdk() {
      console.log('测试微信对象:', wx);
      const url = encodeURIComponent(location.href.split('#')[0]); //对url进行UrlEncode编码
      const res = await query('/api/wechat/getJsconfig', { url: location.href });
      if (res.status === 500) return this.$message.error(res.message);
      res.data.jsApiList = [];
      // wx.config(res.data)
      configJsSDK(res.data);
      wx.ready(() => {
        console.log('微信配置ready......');
      });
      // wx.getNetworkType({
      //   success:(res)=>{
      //     console.log('测试resres:',res)
      //     // 返回网络类型
      //     const networkType=res.networkType
      //     console.log('测试nextworkType:',networkType)
      //   }
      // })
    },
    query() {
      query('/api/wechat/getAccessToken')
        .then((res) => {
          console.log('测试接收:', res);
        })
        .catch((err) => {
          console.log('测试异常:', err);
        });

      // if (!res) return;
      // window.sessionStorage.setItem('userLogin', JSON.stringify(res.data));
    },
    async post() {
      try {
        const res = await post('/api/user', { id: 1 }, { num: 3 });
        console.log('测试666:', res);
        if (!res || !res.data) this.$message.error('错了哦，这是一条错误消息');
        window.sessionStorage.setItem('userLogin', JSON.stringify(res.data.result.token));
      } catch (error) {
        console.log('异常响应:', error);
      }
    },

    async formPost() {
      const params = {
        id: 1,
        name: '张三',
        age: 18,
      };
      try {
        const res = await postForm('/api/insert', params);
        console.log('测试:', res);
      } catch (error) {
        console.log('异常响应:', error);
      }
    },
  },
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
